<template>
  <div class="city_body">
    <div class="city_list" ref='box'>
      <div class="city_hot">
        <h2>热门城市</h2>
        <ul class="clearfix">
          <li v-for="city in hot" :key="city.id" @click="handlerToCity(city.name,city.id)">{{city.name}}</li>
        </ul>
      </div>
      <div class="city_sort">
        <div v-for="cityGroup in cities" :key="cityGroup.index">
          <h2 ref="h2">{{cityGroup.index}}</h2>
          <ul>
            <li v-for="city in cityGroup.list" :key="city.id" @click="handlerToCity(city.name,city.id)">{{city.name}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="city_index">
      <ul>
        <li v-for="(cityGroup,index) in cities" :key="cityGroup.index" @click="goToCity(index)" :class="{active:index===activeIndex}">{{cityGroup.index}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
    name:'City',
    data(){
      return{
        hot:[],
        cities:[],
        activeIndex : -1
      }
    },
    async created(){
      // 如果有本地存储信息，则直接从本地获取
      let hot = window.localStorage.getItem('hot');
      let cities = window.localStorage.getItem('cities');
      if(hot&&cities){
        this.hot = JSON.parse(hot);
        this.cities = JSON.parse(cities);
        return;
      }

      // 请求城市数据
      let data = await this.$axios.get('/api/city');
      // console.log(data);
      window.localStorage.setItem('hot',JSON.stringify(data.data.hot));
      window.localStorage.setItem('cities',JSON.stringify(data.data.cities));
      this.hot = data.data.hot;
      this.cities = data.data.cities;
    },
    methods:{
      // 点击字母跳转到对应的城市群组
      goToCity(index){
        this.activeIndex = index;
        // console.log(index);
        this.$refs.box.scrollTop = this.$refs.h2[index].offsetTop
      },
      handlerToCity(nm,id){
        // 点击城市修改vuex里的数据，并跳转到nowplaying
        this.$store.commit('city/CITY_INFO',{
            nm,
            id
        })
        this.$router.push('/movie/nowplaying')
        // console.log(this.cities);
      }
    }
};
</script>

<style scoped>
#content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{
    background-color:transparent;
    width:0;
}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;}

.city_body .city_index ul li.active{
  color: #fff;
  background: red;
}
</style>